<template>
  <section class="page product-manage">
    <div v-for="item in productList" :key="item.id" class="product-card">
      <el-card :body-style="{ padding: '0px', height: '320px' }">
        <el-dropdown trigger="click" @command="handleCommand">
          <span>
            <svg-icon iconName="dots"></svg-icon>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="{type: 'delete', id: item.id}">删除</el-dropdown-item>
            <el-dropdown-item v-if="item.productStatus === 'NO_PUBLIC'" :command="{type: 'edit', id: item.id}">编辑</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        
        <div class="product-card-content">
          <div class="name">{{item.productName}}</div>
          <div class="content">
            <strong>产品内容：</strong>
            {{item.productContent}}
          </div>
          <div class="remark">
            <strong>说明：</strong>
            {{item.remark}}
          </div>
          <el-row>
            <el-col :span="12">{{item.productPrice}}元/会员卡</el-col>
            <el-col :span="12" style="text-align: right;">
              发布 <el-switch :value="item.productStatus === 'PUBLIC'" :disabled="item.productStatus === 'PUBLIC'" @change="onChangeStatus(item.id)"></el-switch>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
    <div class="add-icon">
      <el-card :body-style="{ padding: '0px', height: '320px' ,'align-items': 'center', display: 'grid'}">
        <span @click="isOpen = true">
          <svg-icon iconName="plus-product"></svg-icon>
        </span>
       </el-card>
    </div>

    <!-- 添加产品 -->
    <el-dialog title="添加产品" :close-on-click-modal="false" :show-close="false" :visible.sync="isOpen" @open="$nextTick(() => $refs['add-product'].refresh())">
      <add-product ref="add-product" @close="isOpen = false" @refreshData="refreshData()"></add-product>
    </el-dialog>

    <!-- 编辑产品 -->
    <el-dialog title="编辑产品" :close-on-click-modal="false" :show-close="false" :visible.sync="isOpenEidt" @open="$nextTick(() => $refs['edit-product'].refresh())">
      <edit-product ref="edit-product" @close="isOpenEidt = false" @refreshData="refreshData()" :productInfo="productInfo"></edit-product>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>删除不可恢复，是否确认删除？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button @click="dialogVisible = false, deleteProduct()">确 定</el-button>
      </span>
    </el-dialog>
  </section>
</template>


<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Auth, Layout, Dependencies } from "~/core/decorator";
import SvgIcon from "~/components/common/svg-icon.vue";
import AddProduct from "~/components/product-manage/product-manage/add-product.vue";
import EditProduct from "~/components/product-manage/product-manage/edit-product.vue";
import { ProductService } from "~/service/service-product/product.service";
import { RSA_PKCS1_PADDING } from "constants";

@Layout("workspace")
@Component({
  components: {
    SvgIcon,
    AddProduct,
    EditProduct
  }
})
export default class ProductManage extends Vue {
  @Dependencies(ProductService)
  private productService: ProductService

  // 产品列表
  private productList: any[] = []
  private isOpen: boolean = false
  private isOpenEidt: boolean = false
  private dialogVisible: boolean = false
  private productId: string = ''
  private productInfo: any = null

  private activated() {
    this.refreshData()
  }

  private refreshData() {
    this.productService.findAllPublicProductList().subscribe(
      data => (this.productList = data || []),
      error => this.$message.error(error.msg)
    )
  }

  private handleCommand(command: any) {
    if (command.type === 'delete') {
      this.dialogVisible = true
      this.productId = command.id
    }
    if (command.type === 'edit') {
      for (let item of this.productList) {
        if (item.id === command.id) {
          this.productInfo = item
          this.isOpenEidt = true
          return
        }
      }
    }
  }

  private deleteProduct() {
    this.productService.deleteProduct(this.productId).subscribe(
      data => {
        this.refreshData()
        this.$message.success('删除成功')
      },
      error => this.$message.error(error.msg)
    )
  }

  private onChangeStatus(productId) {
    this.productService.publicProduct(productId).subscribe(
      data => this.refreshData(),
      error => this.$message.error(error.msg)
    )
  }
}
</script>
<style lang="less">
.page.product-manage {
  margin-left: 20px;
  .product-card{
    width: 300px; 
    height: 350px; 
    float: left; 
    margin: 3px;
    .svg-icon{
      font-size: 12px!important;
    }
    div.product-card-content{
      padding: 14px;
      .name {
        margin: 30px auto; font-size: 28px; text-align: center;
      }
      .content{
        height: 80px; font-size: smaller;
      }
      .remark {
        height: 80px; font-size: small;
      }
    }
  }
  .add-icon {
    width: 300px; 
    height: 350px; 
    float: left; 
    margin: 3px;
    span {
      text-align: center;
    }
    .svg-icon{
      font-size: 100px!important;
    }
  }
  .el-dropdown {
    float: right;
    cursor: pointer;
  }
 
}
</style>


